<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../umd/d3plus-core.full.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/@d3plus/plot@1"></script> -->

  <!-- Inter -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

  <style>

    body {
      margin: 0;
      overflow: hidden;
    }

  </style>

</head>

<body></body>

<script>

  var data = [
    {id: "alpha", sub: 300, value: 300},
    {id: "alpha", sub: 150, value: 150},
    {id: "alpha", sub: 150, value: 150},
    {id: "alpha", sub: 150, value: 150},
    {id: "alpha", sub: 150, value: 150},
    {id: "alpha", sub: 20, value: 20},
    {id: "alpha", sub: 180, value: 180},
    {id: "alpha", sub: 40, value: 40},
    {id: "alpha", sub: 170, value: 170},
    {id: "alpha", sub: 125, value: 125},
    {id: "alpha", sub: 74, value: 74},
    {id: "alpha", sub: 80, value: 80},
    {id: "beta", sub: 180, value: 180},
    {id: "beta", sub: 30, value: 30},
    {id: "beta", sub: 120, value: 120},
    {id: "beta", sub: 50, value: 50},
    {id: "beta", sub: 140, value: 140},
    {id: "beta", sub: 115, value: 115},
    {id: "beta", sub: 20, value: 20},
    {id: "beta", sub: 30, value: 30}
  ];

    new d3plus.BoxWhisker()
      .data(data)
      .groupBy(["id", "value"])
      .x("id")
      .y("value")
      .render();

</script>

</html>
